window.addEventListener("load", () => {
    class List{
        constructor(){
            // this.data=null;
            this.data=[
                {"id":"1","count":1,
                    "price": "\n                                                                    ￥1498\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/ik1176 (3).png",
                    "title": "【新品】罗技iK1095键盘保护套 适用于 iPad Air（第四代）"
                },
                {"id":"2","count":1,
                    "price": "\n                                                                    ￥1498\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/ik1176 (3).png",
                    "title": "罗技iK1176键盘保护套 适用于 11 英寸 iPad Pro（第一、二、三代）"
                },
                {"id":"3","count":1,
                    "price": "\n                                                                    ￥1698\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/1.png",
                    "title": "罗技iK1275键盘保护套 适用于 12.9 英寸 iPad Pro（第五代）"
                },
                {"id":"4","count":1,
                    "price": "\n                                                                    ￥1899\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-04-06/NEW_XL/K860.png",
                    "title": "罗技 ERGO K860人体工学分体式键盘"
                },
                {"id":"5","count":1,
                    "price": "\n                                                                    ￥1599\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-12-08/NEW_XL/002.png",
                    "title": "罗技Folio Touch ik1094键盘保护套"
                },
                {"id":"6","count":1,
                    "price": "\n                                                                    ￥1599\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-11-27/NEW_XL/01 (1).png",
                    "title": "罗技FolioTouch IK1175背光键盘保护套,适配11英寸iPad Pro(第一、二代)"
                },
                {"id":"7","count":1,
                    "price": "\n                                                                    ￥1399\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-09-01/NEW_XL/01-1.png",
                    "title": "罗技 Combo Touch键盘保护套（适配iPad第七代）"
                },
                {"id":"8","count":1,
                    "price": "\n                                                                    ￥1399\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-09-01/NEW_XL/05.png",
                    "title": "罗技 Combo Touch键盘保护套【适配iPad Air第三代和10.5英寸iPad Pro】"
                },
                {"id":"9","count":1,
                    "price": "\n                                                                    ￥1099\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-08-11/NEW_XL/01.png",
                    "title": "罗技 SLIM FOLIO PRO iK1274集成蓝牙键盘保护套"
                },
                {"id":"10","count":1,
                    "price": "\n                                                                    ￥1229\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/k380可妮兔-01-min.png",
                    "title": "罗技 K380多设备蓝牙键盘LINE FRIENDS 可妮兔【限量送李易峰充电宝】"
                },
                {"id":"11","count":1,
                    "price": "\n                                                                    ￥1229\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/k380布朗熊-02-min.png",
                    "title": "罗技 K380多设备蓝牙键盘LINE FRIENDS 布朗熊【限量送李易峰充电宝】"
                },
                {"id":"12","count":1,
                    "price": "\n                                                                    ￥1799\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/Slim-Folio-iPad-Air-键盘保护套-01.png",
                    "title": "罗技 Slim Folio iPad键盘保护套 【ik1055BK iPad键盘保护套】"
                },
                {"id":"13","count":1,
                    "price": "\n                                                                    ￥1799\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/Slim-Folio-iPad-01 .png",
                    "title": "罗技 Slim Folio iPad Air 键盘保护套"
                },
                {"id":"14","count":1,
                    "price": "\n                                                                    ￥1229\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/K380白-01-min.png",
                    "title": "罗技 K380蓝牙键盘 芍药白【限量送李易峰充电宝】"
                },
                {"id":"15","count":1,
                    "price": "\n                                                                    ￥1229\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/K380粉-01-min.png",
                    "title": "罗技 K380蓝牙键盘 茱萸粉【限量送李易峰充电宝】"
                },
                {"id":"16","count":1,
                    "price": "\n                                                                    ￥1699\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2019-02-15/NEW_XL/ik1053-01.png",
                    "title": "罗技 iK1053 键盘保护套【iK1052升级版，不含笔】"
                }
            ]
            this.init()
            this.arr=[];
            //this.render(this.data)
            this.flag=1;
            this.bindevent()
        }
        init(){
            this.uname=$.cookie("uname");
            if(this.uname!=undefined){
                $("#wd").html(this.uname)
                $("#wdd").css("display","none")
                $("#exit").css("display", "none");
                this.flag=1;
              }
        }
        bindevent(){
           $("#lbtn_SortPrice").on("click",()=>{
               if(this.flag==1){
                    
                    this.render(this.sheng());
                    Echo.init({
                        offset:0,
                        throttle:1000
                    })
                    this.flag=2;
               }else{
                
                this.render(this.jiang());
                Echo.init({
                    offset:0,
                    throttle:1000
                })
                this.flag=1
                    
               }
           })
            $(".p-tool-btn").on("click",(e)=>{
                // console.log(e.target.parentNode.getAttribute("id"));
                this.id=e.target.parentNode.getAttribute("id")
                this.list=e.target.parentNode.parentNode.parentNode;
                this.count=this.list.getAttribute("count");
                var num=Number(this.count)+1
                this.list.setAttribute("count",num)
                var bq=this.data[this.id-1];
                // console.log(num);
                console.log(this.id,this.count);
                localStorage.setItem(this.id, this.count);
                //console.log(localStorage.getItem(this.id));
            })
            $(".p-img").on("click",(e)=>{
                console.log(e.target.parentNode.parentNode.parentNode);
                var id=e.target.parentNode.parentNode.parentNode
                var idd=id.getAttribute("idd")
                
                location.href="../dist/details.html#id="+idd
            })
        }
        render(msg){
            $(".productList-list-ul").html(msg.map(
                item =>`<li class="list" count=${item.count}>
                <div class="list-box" idd=${item.id}>
                    <p class="p-img">
                            <a href="javascript:void(0);" >
                                <img src="../static/images/blank.gif" alt="罗技 Slim Folio iPad Air 键盘保护套" data-echo="${item.src}">
                            </a>
                    </p>
                    <p class="p-name">
                        <a href="javascript:void(0);" title="罗技 Slim Folio iPad Air 键盘保护套">${item.title}</a>
                    </p>
                    <p class="p-price-comment">
                            <span class="price">
                                商城价
                                    <strong>
                                        ${item.price}
                                    </strong>
                            </span>
                            <span class="comment">0 评价</span>
                    </p>
                    <p class="p-tool" id=${item.id}>
                                    <a class="p-tool-btn no" href="javascript:void(0)" >加入购物车</a>
                    </p>
                </div>
            </li>`
                
          ).join(""))
            
        } 
        sheng(){
            return this.data.sort(asc("price"));
        }
        jiang(){
            return this.data.sort(desc("price"));
        }
    
    }
    function asc(filed, type = "asc") {
            return (a, b) => {
            if (type == "asc") return a[filed] > b[filed] ? 1 : -1;
            return a[filed] > b[filed] ? -1 : 1;
            };
        }
        function desc(filed, type = "asc") {
            return (a, b) => {
            if (type == "asc") return a[filed] < b[filed] ? 1 : -1;
            return a[filed] < b[filed] ? -1 : 1;
            };
        }
    new List
    Echo.init({
        offset:0,
        throttle:1000
    })
    
    
    
})